<template>
  <div class="house-item-type3">
    <div class="item-inner">
      <!-- 封面 -->
      <div class="cover">
        <img :src="itemData.image?.url" alt="" />
      </div>

      <div class="infos">
        <div class="location">
          <img class="icon" src="@/assets/img/home/location.png" alt="" />
          <span>{{ itemData.location }}</span>
        </div>
        <div class="houseName">
          {{ itemData.houseName }}
        </div>
        <div class="summary">
          {{ itemData.summaryText }}
        </div>

        <div class="price">
          <div class="new">{{ '￥' + itemData.finalPrice }}</div>
          <div class="old">{{ '￥' + itemData.productPrice }}</div>
          <div class="tip" v-if="itemData.priceTipBadge">
            {{ itemData.priceTipBadge?.text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    itemData: {
      type: Object,
      default: () => ({})
    }
  })
</script>

<style scoped lang="less">
  .house-item-type3 {
    width: 50%;
    .item-inner {
      margin: 5px;
    }
    .cover img {
      width: 100%;
      border-radius: 10px;
    }
    .icon {
      width: 18px;
    }
    .infos {
      padding: 2px;
    }

    .houseName {
      margin: 5px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 15px;
    }
    .location {
      margin-top: 10px;
      font-size: 15px;
    }
    .summary {
      font-size: 14px;
      margin: 5px 0;
    }
    .price {
      display: flex;
      font-size: 15px;
    }
    .new {
      color: orange;
    }
    .old {
      color: gray;
      text-decoration: line-through;
      margin-left: 4px;
    }
    .tip {
      color: #fff;
      background-image: linear-gradient(270deg,#f66,#ff9f9f);
      border-radius: 5px;
      margin-left: 4px;
    }
  }
</style>
